import { reactive, ref, onMounted, nextTick } from "vue";
import { getLeftTree } from '@/api/user/user'
import { ElTree } from "element-plus";
import { SelectNode } from "@/api/dept/DeptModel";

export default function leftTree(emit) {
    // 树的ref属性
    const parentTree = ref<InstanceType<typeof ElTree>>()

    // 上级树的数据
    const treeData = reactive({
        data: []
    })

    // 选中的数据
    const selectNode = reactive<SelectNode>({
        id: '',
        name: ''
    })

    // 树的属性
    const defaultProps = reactive({
        children: 'children',
        label: 'name',
    })

    // 树的点击事件
    const handleNodeClick = (data: any) => {
        // console.log("点击了===")
        // console.log(data)
        selectNode.id = data.id
        selectNode.name = data.name
        // console.log(selectNode)
        emit('treeClick', data.id)
    }

    // 获取树的数据
    const getTreeData = async () => {
       let res = await getLeftTree()
       if(res && res.code === 200) {
            treeData.data = res.data
            // 默认选中第一个树的节点
            nextTick(() => {
                const nodes = document.querySelector('.el-tree-node') as any
                if(nodes) {
                    nodes.click()
                }
            })
       }
    }

    // 加号和减号的点击事件
    const openBtn = (data:any) => {
        console.log(data)
        // 设置展开或者关闭
        data.open = !data.open
        if(parentTree.value) {
            parentTree.value.store.nodesMap[data.id].expanded = !data.open
        }
    }

    onMounted(() => {
        getTreeData() 
    })

    return {
        treeData,
        defaultProps,
        handleNodeClick,
        getTreeData,
        openBtn,
        parentTree,
        selectNode
    }
}